<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 全局弹窗管理器：单例模式（闭包实现）
const PopupManager = (function() {
  // 私有变量：存储弹窗DOM、实例状态
  let popupDOM = null;
  let instance = null;

  // 私有方法：创建弹窗DOM（仅内部调用）
  function createPopupDOM() {
    const div = document.createElement('div');
    div.style.cssText = `
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 4px;
      z-index: 9999; display: none;
    `;
    document.body.appendChild(div);
    return div;
  }

  // 公有的实例方法
  function Popup() {
    this.popupDOM = popupDOM || createPopupDOM();
  }

  // 显示弹窗：接收弹窗内容
  Popup.prototype.show = function(content) {
    this.popupDOM.innerText = content;
    this.popupDOM.style.display = 'block';
  };

  // 隐藏弹窗
  Popup.prototype.hide = function() {
    this.popupDOM.style.display = 'none';
  };

  // 全局访问入口：确保实例唯一
  return {
    getInstance: function() {
      if (!instance) {
        instance = new Popup();
      }
      return instance;
    }
  };
})();

// 测试：两次调用getInstance，操作同一弹窗
const popup1 = PopupManager.getInstance();
const popup2 = PopupManager.getInstance();

popup1.show('这是第一个弹窗'); // 显示弹窗
setTimeout(() => {
  popup2.hide(); // 隐藏弹窗（证明操作的是同一实例）
}, 2000);
    </script>
</body>
</html>